<template>
  <div class="register">
    <div class="register-container">
      <el-row>
        <el-col :span="12">
          <div>
            <span style="background-color: #2158F3;font-size: 12px;">&nbsp</span>
            &nbsp企业认证
          </div>
        </el-col>
        <el-col :span="12"></el-col>
      </el-row>

      <div style="width: 80%;margin: 50px ;min-height:1000px;">
        <el-steps style="min-width: 600px;width: 100%;margin-left: 50px;" :active="active" process-status="wait"
          align-center size="small">
          <el-step title="企业实名认证" />
          <el-step title="法定代表人认证" />
          <el-step title="管理员认证" />
        </el-steps>

        <el-form v-if="active == 1" ref="companyRef" :model="companyData" :rules="companyRules" label-width="150px"
          label-position="right" style="margin:auto; width: 600px;margin-top: 50px;">
          <el-form-item label="营业执照：" prop="businessLicense">
            <licenseOcr ref="licenseRef" :needOcr="true" :drag="false" @ocrLicense="ocrLicense">
            </licenseOcr>
          </el-form-item>
          <el-form-item label="统一社会信用代码：" prop="invoiceTaxnum">
            <el-input v-model="companyData.invoiceTaxnum" size="large" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="企业名称：" prop="name">
            <el-input v-model="companyData.name" size="large" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="法定代表人：" prop="identity">
            <el-input v-model="companyData.identity" size="large" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="成立日期：" prop="foundingTime">
            <el-date-picker v-model="companyData.foundingTime" type="date" placeholder="" size="large" />
          </el-form-item>
          <el-form-item label="营业期限：" prop="businessHours">
            <el-input v-model="companyData.businessHours" size="large" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="主营业务：" prop="mainBusiness">
            <el-input v-model="companyData.mainBusiness" size="large" placeholder="请输入" />
          </el-form-item>
          <el-form-item :label-width="0">
            <el-button :loading="loading" @click="handleNextStep" type="primary" size="large"
              style="margin-top: 20px;width: 100%;">
              <span> 下一步 </span>
            </el-button>
          </el-form-item>
        </el-form>
        <el-form v-if="active == 2" ref="legalManRef" :model="legalMan" :rules="legalManRules" label-width="200px"
          label-position="right" style="margin:auto; width: 600px;margin-top: 50px;">
          <el-form-item label="法定代表人身份证照片：" prop="username">
            <IDCardOcr ref="IDCardRef" :title="'上传身份证人像面照片'" :needOcr="true" :drag="false" :isFronface="true"
              @ocrIDCard="ocrIDCardFront">
            </IDCardOcr>
          </el-form-item>
          <el-form-item label="" prop="username">
            <IDCardOcr ref="IDCardRef" :title="'上传身份证国徽面照片'" :needOcr="true" :drag="false" :isFronface="false"
              @ocrIDCard="ocrIDCard">
            </IDCardOcr>
          </el-form-item>
          <el-form-item label="法定代表人身份证号：" prop="idNo">
            <el-input v-model="legalMan.idNo" size="large" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="法定代表人姓名：" prop="name">
            <el-input v-model="legalMan.name" size="large" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="发证机关：" prop="certificateOffice">
            <el-input v-model="legalMan.certificateOffice" size="large" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="有效期：" prop="validityPeriod">
            <el-date-picker v-model="legalMan.validityPeriod" type="daterange" placeholder="" size="large" />
          </el-form-item>
          <el-form-item label="手机号：" prop="tel">
            <el-col :span="16"><el-input v-model="legalMan.tel" size="large" placeholder="请输入" /></el-col>
            <el-col :span="8" align="right"> <el-button type="primary" size="large">获取验证码</el-button></el-col>
          </el-form-item>
          <el-form-item label="验证码：" prop="code">
            <el-input v-model="legalMan.code" size="large" placeholder="请输入" />
          </el-form-item>
          <el-form-item :label-width="0">
            <el-button :loading="loading" @click="handleNextStep" type="primary" size="large"
              style="margin-top: 20px;width: 100%;">
              <span> 下一步 </span>
            </el-button>
          </el-form-item>
        </el-form>
        <el-form v-if="active == 3" ref="adminRef" :model="adminData" :rules="adminRules" label-width="150px"
          label-position="right" style="margin:auto; width: 600px;margin-top: 50px;">
          <el-form-item label="管理员身份证照片：" prop="username">
            <IDCardOcr ref="IDCardRef" :title="'上传身份证人像面照片'" :needOcr="true" :drag="false" @ocrLicense="ocrLicense">
            </IDCardOcr>
          </el-form-item>
          <el-form-item label="" prop="username">
            <IDCardOcr ref="IDCardRef" :title="'上传身份证国徽面照片'" :needOcr="true" :drag="false" @ocrLicense="ocrLicense">
            </IDCardOcr>
          </el-form-item>
          <el-form-item label="管理员身份证号：" prop="username">
            <el-input v-model="adminData.username" size="large" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="管理员姓名：" prop="username">
            <el-input v-model="adminData.username" size="large" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="发证机关：" prop="username">
            <el-input v-model="adminData.username" size="large" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="有效期：" prop="username">
            <el-date-picker v-model="adminData.value1" type="daterange" placeholder="" size="large" />
          </el-form-item>
          <el-form-item>
            <div>
              <el-checkbox v-model="param.isAgree" />
              <span style="font-size: 12px;">
                我已阅读并同意
                <a href="#">《智箱界供应链平台服务协议》</a>
                <a href="#">《用户隐私》</a>
              </span>
            </div>
          </el-form-item>
          <el-form-item :label-width="0">
            <el-button :loading="loading" @click="handleSubmit" type="primary" size="large"
              style="margin-top: 20px;width: 100%;">
              <span> 提 交 </span>
            </el-button>
          </el-form-item>
        </el-form>

      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import IDCardOcr from '@/components/upload/IDCardOcr.vue'
import licenseOcr from '@/components/upload/licenseOcr.vue'
// import logo from '@/assets/logo/chengzhi.png'
import { ElMessage, ElMessageBox } from "element-plus";
import { getCodeImg, register } from "@/api/login";
import { sms_code_identity, sms_code_conservator, sms_code_tourist } from '@/api/sms/index'
import { getUserData, registerTourist } from '@/api/user/index'
import { addSysCompany, updateSysCompany, updateSysCompanyExamineStatus, ocrIDCardVerify, ocrLicenseVerify } from '@/api/company/index'
import { getCurrentInstance, ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
const { proxy } = getCurrentInstance();

const param = ref({
  username: "",
  password: "",
  confirmPassword: "",
  select: '1',
  mobile: "",
  code: "",
  isAgree: false
});

const active = ref(1)

const registerRules = {
  username: [
    { required: true, trigger: "blur", message: "请输入您的账号" },
    { min: 6, max: 25, message: "用户账号长度必须介于 6 和 25 之间", trigger: "blur" },
    { pattern: /^[a-zA-Z0-9_]+$/, message: "请输入大小写字母、数字、下划线", trigger: "blur" }
  ],
  password: [
    { required: true, trigger: "blur", message: "请输入您的密码" },
    { min: 8, max: 20, message: "用户密码长度必须介于 8 和 20 之间", trigger: "blur" },
    { pattern: /^[^<>"'|\\]+$/, message: "请输入大小写字母、数字、特殊符号", trigger: "blur" }
  ],
  confirmPassword: [
    { required: true, trigger: "blur", message: "请再次输入您的密码" },
  ],
  mobile: [{ required: true, trigger: "blur", message: "请输入手机号" }],
  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
};

//下一步
const loading = ref(false);
function handleNextStep() {
  // const data = {
  //   "name": "河南亚航国际货运代理有限公司",
  //   "orgCode": "91410105671693661Y",
  //   "legalRepName": "武金磊"
  // }
  if (active.value == 1) {
    const data = {
      "name": companyData.value.name,
      "orgCode": companyData.value.invoiceTaxnum,
      "legalRepName": companyData.value.identity,
    }
    ocrLicenseVerify(data).then(res => {
      active.value++
    })
  }
  if (active.value == 2) {
    const data = {
      "idNo": legalMan.value.idNo,
      "name": legalMan.value.name
    }
    ocrIDCardVerify(data).then(res => {
      active.value++
    })
  }
  return proxy.$refs.registerRef.validate(valid => {
    if (valid) {
      if (!param.value.isAgree) {
        return ElMessage.warning('请选择同意平台协议！')
      }
      loading.value = true;
      const data = {
        username: param.value.username,
        password: param.value.password,
        verifyPassWord: param.value.confirmPassword,
        code: param.value.code,
        mobile: param.value.mobile,
      }
      registerTourist(data).then(res => {
        const username = param.value.username;
        ElMessageBox.alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", "系统提示", {
          dangerouslyUseHTMLString: true,
          type: "success",
        }).then(() => {
          router.push("/login");
        }).catch(() => { });
      }).catch(() => {
        ElMessage.error('抱歉哦！注册失败')
        loading.value = false;
      });
    }
  });
}

// 发票识别
const companyData = ref({})
const ocrLicense = (val: any) => {
  // console.log(val)
  // companyData.value = val
  companyData.value.invoiceTaxnum = val.certNo
  companyData.value.name = val.name
  companyData.value.identity = val.legalRepName
  companyData.value.foundingTime = val.establishDate.replace(/(\d{4})年(\d{2})月(\d{2})日/, '$1-$2-$3');
  companyData.value.businessHours = val.validTerm
  companyData.value.mainBusiness = val.scope
  // companyData.value.businessLicense = val.name
  console.log(companyData)
  return invoice.value.invoiceNo = val.data.invoiceNo
}

// 身份证识别 zheng
const legalMan = ref({})
const ocrIDCardFront = (val: any) => {
  console.log(val)
}
const ocrIDCard = (val: any) => {
  console.log(val)
}

function getRegisterCode() {
  const data = {
    "mobile": param.value.mobile
  }
  sms_code_tourist(data).then(res => {
    ElMessage.success("验证码发送成功！");
  });
}

// 提交 
const adminData = ref({})
function handleSubmit() {
  const data = {
    "id": 6,
    "examineStatus": 10, //examineStatus: 审核状态 5-待审核 10-已通过 15-已驳回 20-已过期
    "reasonRejection": "驳回原因"
  }
  updateSysCompanyExamineStatus(data).then(res => {
    router.push('companyInfo')
  })
} 
</script>

<style lang='scss' scoped>
a {
  text-decoration: underline;
  color: #409eff;
}

.register {
  width: 100%;
  min-height: 1000px;
  background-color: #eee;

  .register-header {
    width: 100%;
    height: 80px;
    background-color: white;
    box-sizing: border-box;
    padding: 20px;
  }

  .register-container {
    width: 80%;
    min-width: 1000px;
    background-color: white;
    margin: auto;
    box-sizing: border-box;
    padding: 20px 30px;
    margin-top: 20px;
  }

  .register-header-logo {
    float: left;
    margin-left: 10%;
  }

  .register-code {
    width: 35%;
    height: 40px;
    float: right;
  }
}
</style>
